<template>
    <div class="main">
        <div class="list" v-for="item in list" :key="item.img">
            <img :src="item.img" />
        </div>
    </div>
</template>

<script>
export default {
    data: function() {
        let that = this;
        this.axios.get("json/tuijian.json").then(function(res) {
            that.list = res.data;
        });
        return {
            list: []
        }
    },
    watch: {
        reqIdx: function(res) {
            let that = this;
            if(res == 1) {
                this.axios.get("json/tuijian.json").then(function(res) {
                    that.list = res.data;
                });
            }else if(res == 2) {
                this.axios.get("json/diannao.json").then(function(res) {
                    that.list = res.data;
                });
            }else {
                this.axios.get("json/shouji.json").then(function(res) {
                    that.list = res.data;
                 });
            }
        }
    },
    props: ['reqIdx']
}
</script>

<style lang="less" scoped>
.main {
    width: 100%;
    height: 100%;
    .list {
        margin: 5px;
        width: calc(25% - 10px);
        height: calc(50% - 10px);
        float: left;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .list:hover {
        box-shadow: 10px 5px 10px #555;
    }
}
</style>
